<template>
  <div id="code-editor" ref="codeEditorRef" style="min-height: 400px; margin-top: 50px;" />
  {{ editorAttr.value }}
</template>

<script lang="ts" setup>
import * as monaco from "monaco-editor";
import { ref, onMounted, toRaw, withDefaults, defineProps } from "vue";
import EditorProps from "@/interface/EditorProps";

//HTML节点元素的引用
const codeEditorRef = ref();
//Monaco代码编辑器实例
const codeEditorInstance = ref();

//定组件所需传递的属性以及默认值
const editorAttr = withDefaults(defineProps<EditorProps>(), {
  value: () => "",
  handleChange: (v: string) => {
    console.log(v);
  }
});

onMounted(() => {
  /**
   * 通过 monaco 获取到 editor 实例并创建 赋值响应式常量配置
   */
  codeEditorInstance.value = monaco.editor.create(codeEditorRef.value, {
    value: editorAttr.value,
    language: "javascript",
    automaticLayout: true,
    colorDecorators: true,
    minimap: {
      enabled: true
    },
    readOnly: false,
    theme: "vs-dark"
  });

  //监听编辑器值的变化
  codeEditorInstance.value.onDidChangeModelContent(() => {
    editorAttr.handleChange(toRaw(codeEditorInstance.value).getValue());
  });
});
</script>

<style scoped>

</style>
